<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-05-17 15:51:29
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-07-26 16:52:03
 * @FilePath: \ericzhang\Rashipier_Monitor\myapp\src\components\Eq_offline.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Eq_offline">
    <!-- 容易组件 -->
    <div class="iconbox">
      <i class="iconfont icon-dianchi"></i>
    </div>
    <div class="itmebox">
      <span>设备离线量</span>
      <h2>{{value}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  setup(){
    const value = 15

    return{
      value
    }
  }
};
</script>

<style lang="less">
@import "~@/assets/icon/font/iconfont.css";
.Eq_offline {
  width: 85%;
  height: 1.5rem;
  border: 0.0125rem solid gray;
  background: #F6A645;
  margin: 0 auto;
  margin-top: 1rem;
  display: flex;

  .iconbox {
    flex: 1;
    i{
      margin-left: .625rem;
      margin-top: .375rem;
      display: inline-block;
    }
    i.icon-dianchi{
      font-size: .875rem;
      color: white;
    }
  }

  .itmebox {
    flex: 1;

    span{
      margin-left: 0rem;
      margin-top: .25rem;
      font-size: .3125rem;
      height: .25rem;
      width: 100%;
      display: inline-block;
    }

    h2{
      margin-top: .125rem;
      color: white;
      font-size: .375rem;
    }
  }
}
</style>